<template>
	<view class="form-container-box">
		<!-- 待用活动表单 -->
		<active-form :formDate="formDate" @choose-image-btn="chooseImage" @delete-img-btn="deleteImg"  @sure-btn="sure" @input-val="inputVal">								
		</active-form>
		<!-- (对必填项input框为空是提示的和错误两种不同提示) -->

		<!-- (对必填项input框为为空和错误是一种提示) -->
		<!-- <view class="buttonBox" @click="submit2">
			提交2
		</view> -->		
		<cover-view class="submit-data">
			{{submitData}}
		</cover-view>
		<button type="primary" @click="$util.redirectTo('/pages/pay/pay')">发布搭子需求</button>
	</view>
</template>

<script>
	import activeForm from './../../components/active_form.vue';
	export default {	
		data() {
			return {
				submitData: "",								
				formDate: [
					{
						placeholder: "请选择",
						label: "搭子类型",
						type: "radio",
						selectVal: ["健身搭子", "游戏搭子", "饭搭子", "旅游搭子", "电影搭子", "就医搭子","考研搭子"],
						rules: {
							name: "interest",
							value: "",
							verify: "req",
							errMess: "请选择搭子类型"
						}
					},
					
					{
						placeholder: "",
						label: "活动时间",
						type: "text",
						rules: {
							name: "realName",
							value: "",
							verify: "req|realName",
							errMess: "时间填写不正确",

						}

					},
										
					{
						placeholder: "请选择",
						label: "性别",
						type: "radio",
						selectVal: ["男", "女", "不限"],
						rules: {
							name: "sex",
							value: "",
							verify: "",
							errMess: "请选择搭子性别"
						}
					},
					{
						placeholder: "请介绍一下活动",
						label: "活动介绍",
						type: "textarea",
						rules: {
							name: "introduce",
							value: "",
							verify: "req",
							errMess: "请输入活动介绍"
						}
					},
					{
						placeholder: "请说明一下活动地点",
						label: "活动地点",
						type: "textarea",
						rules: {
							name: "introduce",
							value: "",
							verify: "req",
							errMess: "请输入活动地点"
						}
					},
					{
						placeholder: "请说明一下对搭子的要求",
						label: "搭子要求",
						type: "textarea",
						rules: {
							name: "introduce",
							value: "",
							verify: "req",
							errMess: "请输入要求"
						}
					},
					{
						label: "发布封面背景",
						type: "image",
						updateImg:false,//默认只显示上传按钮
						rules: {
							name: "idBefore",
							value: "",
							verify: "req",
							errMess: "请上传发布封面"
						}
					},
					
					{
						placeholder: "",
						label: "人数限制",
						type: "number",
						rules: {
							name: "",
							value: "",
							verify: "",
							errMess: "人数格式不正确"
						}

					},
					{
						placeholder: "如果有请填写",
						label: "报酬",
						type: "number",
						rules: {
							name: "",
							value: "",
							verify: "",
							errMess: "金额格式不正确"
						}
					
					},

					{
						placeholder: "请输入11位手机号",
						label: "手机号",
						type: "number",
						rules: {
							name: "phone",
							value: "",
							verify: "req|phone",
							errMess: "手机号填写不正确"
						}
					},
					{
						placeholder: "请输入微信号",
						label: "微信号",
						type: "number",
						rules: {
							name: "phone",
							value: "",
							verify: "",
							errMess: "微信号填写不正确"
						}

					},
					
					{
						placeholder: "请输入QQ",
						label: "QQ",
						type: "number",
						rules: {
							name: "qq",
							value: "",
							verify: "qq",
							errMess: "qq号输入不正确"
						}

					},
					
				]
			}
		},
		components:{
			activeForm
		},
		methods: {
			submit1: function() {
				// 表单验证 可选项 otherPra:otherPra	 
				var otherPra = {
					reqEmptyVal: true,
				}
				if (this.$vervify({
						formDate: this.formDate,
						otherPra: otherPra
					})) {
					uni.showToast({
						title: "验证通过",
						duration: 2000,
						icon: "none"
					});
					// 表单序列化
					this.submitData = "序列化数组：" + JSON.stringify(this.$submitForm(this.formDate))
					console.log(this.$submitForm(this.formDate))
				}
			},
			submit2: function() {
				// 表单验证 非必传otherPra:otherPra	 			
				if (this.$vervify({
						formDate: this.formDate
					})) {
					uni.showToast({
						title: "验证通过",
						duration: 2000,
						icon: "none"
					});
					// 表单序列化
					this.submitData = "序列化数组：" + JSON.stringify(this.$submitForm(this.formDate))
					console.log(this.$submitForm(this.formDate))
				}
			},			
			// 上传图片
			chooseImage: function(data) {		
				var data=JSON.parse(data)					
				this.formDate[data.index].rules.value=data.value;
				this.formDate[data.index].updateImg=true;
			},
			// 删除图片
			deleteImg:function(index){
				this.formDate[index].rules.value="";
				this.formDate[index].updateImg=false;
			},
			// 确定
			sure: function(data) {	
				var data=JSON.parse(data);
				if (String(data.currentSelectIndex) != "" && String(data.currentSelectValue) != "") {				
					this.formDate[data.currentSelectIndex].rules.value = data.currentSelectValue;
				}
			},
			// inputVal
			inputVal:function(data){
				var data=JSON.parse(data);
				if (String(data.val) != "" && String(data.index) != "") {				
					this.formDate[data.index].rules.value = data.val;
				}
			}

		}
	}
</script>

<style lang="scss">
	.form-container-box{
		width: 100vw;
		font-size: 28upx;
		min-height: 100vh;
		position: relative;
		padding-bottom: 100upx;
	}
	.bgfff {
		
	}
	  
	.buttonBox {
		width: 100%;			
		height: 84upx;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ff5b01;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}
	.submit-data {
		padding: 20upx;
		margin-top: 20upx;
		word-break: break-word;
	}
	
</style>
